<!-- top toolbar -->
<div class="sakai-table-toolBar">
    <div class="sakai-table-filterContainer">
        <div class="sakai-table-viewFilter">
            <label for="roster-enrollmentset-selector">{{tr 'enrollment_set_filter_label'}}</label>
            <span class="skip">{{tr 'screenreader_comboBox'}}</span>
            <select id="roster-enrollmentset-selector">
                {{#each enrollmentSets}}
                    <option value="{{id}}">{{title}}</option>
                {{/each}}
            </select>
        </div>

        <div class="sakai-table-viewFilter">
            <label for="roster-status-selector">{{tr 'enrollment_status_filter_label'}}</label>
            <span class="skip">{{tr 'screenreader_comboBox'}}</span>
            <select id="roster-status-selector">
                <option selected="selected" value="">{{tr 'roster_enrollment_status_all'}}</option>
                {{#each enrollmentStatusCodes}}
                    <option value="{{@key}}">{{this}}</option>
                {{/each}}
            </select>
        </div>

        <div class="sakai-table-searchFilter">
            <label for="roster-search-field">{{tr 'roster_search_text'}}</label>
            <div class="sakai-table-searchFilterControls">
                <input id="roster-search-field" type="text" value="{{#if searchQuery}}{{searchQuery}}{{/if}}" class="sakai-table-searchFilter-searchField" />
                <input id="roster-search-button" class="active" type="button" value="{{tr 'roster_search_button'}}" />
                <input id="roster_form_clear_button" type="button" value="{{tr 'roster_clear_button'}}" />
            </div>
        </div>
    </div>

    <div class="sakai-table-buttonContainer">
        <div id="roster_hide_options" class="sakai-table-viewFilter">
            <input type="checkbox" id="roster-hide-pictures-checkbox" />
            <label for="roster-hide-pictures-checkbox">{{tr 'roster_hide_pictures'}}</label>

            <input type="checkbox" id="roster-hide-names-checkbox" />
            <label for="roster-hide-names-checkbox">{{tr 'roster_hide_names'}}</label>
        </div>

        <div id="buttonContainer">
            <button class="btn-link roster-print-button" title="{{tr 'print_roster_tooltip'}}">{{tr 'print_roster'}}</button>
            <button class="btn-link" id="roster-export-button" title="{{tr 'export_roster_tooltip'}}">{{tr 'export_roster'}}</button>
        </div>
    </div>

    <div class="displayFilterContainer">
        {{#if viewOfficialPhoto}}
        <div id="roster_type_selector" class="sakai-table-viewFilter">
            <fieldset class="roundedBorder">
                <legend>{{tr 'picture_source_group'}}</legend>
                <span>
                    <input type="radio" name="roster_picture_type" value="official" id="roster_official_picture_button" {{#if checkOfficialPicturesButton}}checked{{/if}} />
                    <label for="roster_official_picture_button">{{tr 'roster_show_official_pictures'}}</label>
                </span>

                <span>
                    <input type="radio" name="roster_picture_type" value="profile" id="roster_profile_picture_button" {{#unless checkOfficialPicturesButton}}checked{{/unless}} />
                    <label for="roster_profile_picture_button">{{tr 'roster_show_profile_pictures'}}</label>
                </span>
            </fieldset>
        </div>
        {{/if}}

        <div class="sakai-table-viewFilter">
            <fieldset class="roundedBorder">
                <legend>{{tr 'layout_group'}}</legend>
                <span>
                    <input type="radio" id="roster-card-view-radio" name="roster_view_type" />
                    <label for="roster-card-view-radio">{{tr 'roster_card_view'}}</label>
                </span>

                <span>
                    <input type="radio" id="roster-photo-view-radio" name="roster_view_type" />
                    <label for="roster-photo-view-radio">{{tr 'roster_photo_view'}}</label>
                </span>

                <span>
                    <input type="radio" id="roster-spreadsheet-view-radio" name="roster_view_type" checked />
                    <label for="roster-spreadsheet-view-radio">{{tr 'roster_spreadsheet_view'}}</label>
                </span>
            </fieldset>
        </div>
    </div>
</div>
<div class="roster-filter-totals">
    <span id="roster-members-total">{{membersTotal}}</span> -
    <span id="roster-role-totals">({{roleFragments}})</span>
</div>
<!-- end top toolbar -->

<!-- content -->
<div id="roster-members-content" class="table"></div>
<div id="roster-members-loading-image"><img src="/sakai-roster2-tool/images/ajax-loader.gif" /></div>
<!-- end content -->
